<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table模块快速使用</title>
  <link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-inline">
      <input type="text" name="sname"    placeholder="请输入姓名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
	  <div class="layui-inline">
	    <label class="layui-form-label">年龄</label>
	    <div class="layui-input-inline" style="width: 100px;">
	      <input type="text" name="ageMin" placeholder="最小年龄" autocomplete="off" class="layui-input">
	    </div>
	    <div class="layui-form-mid">-</div>
	    <div class="layui-input-inline" style="width: 100px;">
	      <input type="text" name="ageMax" placeholder="最大年龄" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	</div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
 
<table id="demo" lay-filter="test"></table>
 
<script src="./layui/layui.js"></script>
<script>
layui.use(['table','form','jquery'], function(){
  var table = layui.table;
  var form = layui.form;
  var $ = layui.jquery;
  
  //渲染表格
  table.render({
    elem: '#demo'	//绑定表格id
    ,height: 512
    ,url: 'StudentServlet?method=findAll' //数据接口
    ,page: true //开启分页
    ,toolbar: '#toolbarDemo'//绑定头工具栏
    ,cols: [[ //表头
      {field: 'sid', title: '学号'}
      ,{field: 'sname', title: '姓名'}
      ,{field: 'age', title: '年龄',sort:true}
      ,{fixed: 'right',title:'操作',width:200, align:'center', toolbar: '#barDemo'}
    ]]
  });
  
  //行工具条事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
   
    if(layEvent === 'detail'){ //查看
    	//给表单赋值
    	form.val("detail", data);
    	layer.open({
    		  type: 1,
    		  content: $('#detail') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
    		});
    } else if(layEvent === 'del'){ //删除
      layer.confirm('真的删除行么', function(index){                                  
    	$.get(
    		'StudentServlet?method=del&id='+data.sid
    		,function(res){
    			if(res=="success"){
    				layer.msg('删除成功');
    				obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
    			}else{
    				layer.msg('删除失败');
    			}
    		}
    	);
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if(layEvent === 'edit'){ //编辑
      //do something
    	//给表单赋值
    	form.val("edit", data);
    	layer.open({
    		  type: 1,
    		  title:'修改',
    		  content: $('#edit') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
    		});
    } 
  });
  
  
//监听头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'add':
    	  layer.open({
    		  type: 1,
    		  title:'添加',
    		  content: $('#add') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
    		});
      break;
      case 'delete':
        layer.msg('删除');
      break;
      case 'update':
        layer.msg('编辑');
      break;
    };
  });
  
  
  //监听查询表单提交
  form.on('submit(formDemo)', function(data){
    //layer.msg(JSON.stringify(data.field));
    //重载表格
    table.reload('demo', {
		where: data.field //设定异步数据接口的额外参数
	});
    return false;//组织表单提交
  });
  
//监听修改表单提交
  form.on('submit(editBtn)', function(data){
    //将数据提交到后台
       $.post(
    	'StudentServlet?method=edit',
    	data.field,
    	function(res){
    		location.reload();//刷新页面
    	},'text' 
    );  
    return false;
  });
  
//监听添加表单提交
  form.on('submit(addBtn)', function(data){
    //将数据提交到后台
       $.post(
    	'StudentServlet?method=add',
    	data.field,
    	function(res){
    		location.reload();//刷新页面
    	},'text' 
    );  
    return false;
  });
  
});
</script>
</body>
</html>
<!-- 行工具栏 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 头工具栏 -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  </div>
</script>


<form id="detail" class="layui-form" style="display: none" lay-filter="detail">
  <div class="layui-form-item">
    <label class="layui-form-label">学号</label>
    <div class="layui-input-block">
      <input type="text" name="sid"  class="layui-input" readonly="readonly">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-block">
      <input type="text" name="sname"  class="layui-input" readonly="readonly">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">年龄</label>
    <div class="layui-input-block">
      <input type="text" name="age" class="layui-input" readonly="readonly">
    </div>
  </div>
</form>

<form id="edit" class="layui-form" style="display: none" lay-filter="edit">
  <div class="layui-form-item">
    <label class="layui-form-label">学号</label>
    <div class="layui-input-block">
      <input type="text" name="sid" readonly="readonly" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-block">
      <input type="text" name="sname" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">年龄</label>
    <div class="layui-input-block">
      <input type="text" name="age" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="editBtn">确定</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<form id="add" class="layui-form" style="display: none" lay-filter="add">
    <div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-block">
      <input type="text" name="sname" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">年龄</label>
    <div class="layui-input-block">
      <input type="text" name="age" required  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="addBtn">确定</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
 
